<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>原生文件上传</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .file-box {
      position: relative;

    }
    #upload-img{
      position: relative;
      width: 20%;
    }

    .upload-file-btn {
      padding: 6px 10px;
    }

    .message-dialog-box {
      display: none;
      position: absolute;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.1);
      top: 0;
      left: 0;
      z-index: 10;
    }

    .message-content-box {
      position: relative;
      width: max-content;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      padding: 10px 18%;
      border-radius: 10px;

    }

    .message-content {
      height: 40px;
      line-height: 40px;
    }

    .upload-file-btn {

    }


  </style>
</head>
<body>
<!--
  时间:2025年3月22日 12点38分
  需求说明:关于文件上传
  1.需要在数组中定义上传的文件类型
  2.上传时,需要提示文件上传中
  3.上传完毕后,需要进行结果提示框


-->
<div class="file-box">
  <img src="" id="upload-img"/>
  <input name="myFileName" type="file" id="file-input">
  <button class="upload-file-btn" id="upload-file-btn">上传文件</button>
</div>
<div class="message-dialog-box" id="message-dialog-box">
  <div class="message-content-box" id="message-content-box">
    <div class="message-content" id="message-content"></div>
    <button class="upload-file-btn" id="message-dialog-btn">确定</button>
  </div>
</div>
<script type="text/javascript">
  /** 这里使用一次立即执行函数 */
  (function () {
    /** 允许上传的最大文件数量 */
    const maxFileNum = 1;
    /** 允许上传文件的最大容量 */
    const maxFileSize = 1024 * 1024 * 10;// 10MB
    /** 文件上传格式，注意这里是原生限制，在上传的时候，还要对文件名再限制 */
    const fileTypeList = ['.jpg', '.jpeg', '.png', '.jfif'];
    const fileInputDom = document.getElementById('file-input');
    const messageDialogBox = document.getElementById('message-dialog-box');
    const messageContent = document.getElementById('message-content');
    const uploadFileBtn = document.getElementById('upload-file-btn');
    const messageDialogBtn = document.getElementById('message-dialog-btn');
    const uploadImg = document.getElementById('upload-img');

    initPage();

    fileInputDom.addEventListener('input', function (event) {
      const uploadFileList = event.target.files;
      const formData = new FormData();
      const file = uploadFileList[0];
      const reader = new FileReader();
      if (file.size > 1024 * 1024 * 10) {
        dialogShowUtils(true, '照片尺寸过大');
        //重新刷新页面
        history.go(0);
        return;
      }
      reader.onload = function (e) {
        // console.log(161, e.target.result);
        console.log(105, e.target.result);
        uploadImg.src = e.target.result;
      };
      reader.readAsDataURL(file);
    });
    uploadFileBtn.addEventListener('click', function () {
      const uploadFileList = fileInputDom.files;
      //此时表示没有文件上传
      // if (uploadFileList.length === 0) {
      //   dialogShowUtils(true,'未上传文件');
      //   return;
      // }
      fileInputDom.click();
      if (uploadFileList.length > maxFileNum) {
        dialogShowUtils(true, '文件上传数量超过限制');
      }

    });

    /**
     * @desc 初始化等操作
     *
     */
    function initPage() {
      dialogShowUtils(true, '哈哈哈');
      fileInputDom.setAttribute('accept', fileTypeList.join(','));
      // console.log(110, fileInputDom);
      messageDialogBtn.addEventListener('click', function () {
        dialogShowUtils(false, '');
      });
    }

    /**
     * @desc 显示弹框操作方法
     * @param isShow 是否显示弹框
     * @param message 弹框提示示信息
     */
    function dialogShowUtils(isShow, message) {
      if (isShow) {
        messageDialogBox.style.display = 'block';
      } else {
        messageDialogBox.style.display = 'none';
      }
      messageContent.innerText = message;
    }


  })();
</script>
</body>
</html>
